<template>
	<view class="u-page">
		<view class="container" v-if="channel">
			<view class="item">
				<view class="title">
					客户分布
				</view>
				<view class="info">
					<view class="line">
						服务客户：{{store.store_num}}家，本月新增：{{store.store_month_num}}家
					</view>		
				</view>
			</view>
			<view class="item">
				<view class="title">
					<text>服务商收益</text>
				</view>
				<view class="info">
					<view class="line">
						累计收益：￥{{shouyi.all_money}}，今日收益：￥{{shouyi.today_money}}
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					客户卡券
				</view>
				<view class="info">
					<view class="line" v-if="coupon.discount">
						<text>折扣券：{{coupon.discount.count}}张</text>
					</view>
					<view class="line" v-if="coupon.full_minus">
						<text>满减券：{{coupon.full_minus.count}}张</text>
					</view>
					<view class="line" v-if="coupon.cash">
						<text>代金券：{{coupon.cash.count}}张</text>
					</view>
					<view class="line" v-if="coupon.goods">
						<text>商品券：{{coupon.goods.count}}张，余额：{{coupon.goods.total}}次</text>
					</view>
					<view class="line" v-if="coupon.card">
						<text>会员卡：{{coupon.card.count}}张，余额：￥{{coupon.card.balance}}</text>
					</view>
					<view class="line" v-if="coupon.length!=undefined && coupon.length===0">
						<text>无</text>
					</view>		
				</view>
			</view>
			<view class="item">
				<view class="title">
					物流配送(送达/总数)
				</view>
				<view class="info">
					<view class="line">
						<text>今日订单：{{wuliu.receive}}单/{{wuliu.total}}单</text>
					</view>					
				</view>
			</view>
			<view class="item">
				<view class="title">
					网格司机
				</view>
				<view class="info">
					<view class="line">
						<text>{{gird}}个网格，{{driver}}名司机</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl,methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				channel:'',
				gird:'',
				driver:'',
				store:{
					store_num:0,
					store_month_num:0
				},
				wuliu:{
					total:0,
					receive:0
				},
				shouyi:{
					all_money:0,
					today_money:0
				},
				coupon:'',
				xunjia:''
			}
		},
		onLoad(e) {
			this.$get("channel/index/tongji",{channel_id:e.channel_id},true).then(res=>{
				this.channel=res.channel;
				this.coupon=res.coupon;
				this.gird=res.gird;
				this.store=res.store;
				this.driver=res.driver;
				this.shouyi=res.shouyi;
				this.wuliu=res.wuliu;
				uni.setNavigationBarTitle({
					title:res.channel.title
				});
			});
		},
		methods: {
			...methods		
		}
	}
</script>

<style lang="scss">
	.u-page{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}
	.container{
		padding: 20rpx;
		background: #eeeeee;
		padding-bottom: 10rpx;
	}
	.item{
		padding: 10rpx;
		background-color: rgba(48, 216, 231, 0.3);
		font-size: 26rpx;	
		margin-bottom: 10rpx;
		.title{
			padding: 10rpx 0;
			font-weight: bold;
			font-size: 30rpx;
		}
		.info{			
			background-color: #fff;
			overflow: hidden;
			.line{
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 20rpx;
				border-bottom: 1px solid #f1f1f1;
				position: relative;
			}
			.line:last-child{
				border-bottom:0;
			}
			.qrcode{
				text-align: center;
				padding: 20rpx;
				image{
					width: 300rpx;
					height: 300rpx;
				}
			}
			.rightbox{
				position: absolute;
				right: 10rpx;
				top:20rpx;
			}
		}
	}
</style>